<%@ page language="JAVA" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>节日维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/timeSlot.css">
</head>
<body>
<div class="layui-btn-group ml-54 demoTable radius">
    <button class="layui-btn layui-btn-normal" data-type="add">新增</button>
</div>

    <table class="layui-hide" id="timeSlotTable" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
<%--        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>--%>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--添加弹出层-->
    <div id="addMask" style="display: none;">
        <form class="layui-form time-slot" action="#" id=runForm" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">节日名称</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="holidayName" id="holidayName" lay-verify="required"
                           placeholder="请输入节日名称">
                    <input type="hidden" name="id" id="id">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">放假时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="holidayTime" class="layui-input" id="holidayTime" lay-verify="required"
                           placeholder="请选择时间">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">放假天数</label>
                <div class="layui-input-inline">
                    <input type="text" name="holiDays" class="layui-input" id="holiDays" lay-verify="required|number"
                           placeholder="请输入放假天数">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button lay-submit class="layui-btn layui-btn-normal" lay-filter="formTest" id="confirm">确定</button>
                    <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
                </div>
            </div>
        </form>
    </div>
    <script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="${bathPath}/js/common.js"></script>
    <script>
        var layerIndex = null;
        $(function () {
            initLayUI();
        })

        function initLayUI() {
            layui.use(['form', 'laydate', 'layer', 'table'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                var table = layui.table;
                var layer = layui.layer;

                var height = document.documentElement.clientHeight-350;
                table.render({
                    elem: '#timeSlotTable'
                    , url: '${bathPath}/holidays/selectAll.action'
                    , toolbar: true
                    , title: '节日维护表'
                    ,height: 'full-38'
                    , cols: [[
                        {field: 'holidayName', title: '节日名称'}
                        , {field: 'holidayTime', title: '放假时间'}
                        , {field: 'holiDays', title: '放假天数',templet: function (data) {
                                return data.holiDays + '天';
                            }}
                        , {toolbar: '#barDemo', title: '操作', width: 180}
                    ]]
                    , page: false
                    , response: {
                        statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , id: 'testReload'
                    ,parseData: function(res){ //res 即为原始返回的数据
                        $.each(res.data,function(i,item){
                            res.data[i].holidayTime= formatTime(item.holidayTime);
                        })
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.count, //解析数据长度
                            "data": res.data//解析数据列表
                        };
                    }
                });

                var $ = layui.$, active = {
                    reload: function () {
                        //执行重载
                        table.reload('testReload', {
                            where: {
                            }
                            // , page: {
                            //     curr: 1
                            // }
                        });
                    }
                };

                $('.radius .layui-btn').on('click', function () {
                   runEvent();
                });


                //监听工具条
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'add') {
                        //传入add逻辑事件
                        runEvent();
                    } else if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            //清除时段逻辑
                            var dataJson = {};
                            dataJson.id = data.id;
                            $.ajax({
                                type: 'POST',
                                data: dataJson,
                                contentType:"application/x-www-form-urlencoded",
                                url: '${bathPath}/holidays/delete.action',
                                success: function (data) {
                                    if (data == 'SUCCESS') {
                                        layer.close(index);
                                        active.reload();
                                    }
                                }
                            })
                        });
                    } else if (obj.event === 'edit') {
                        //传入编辑逻辑事件
                        runEvent(data);
                    } else if (obj.event === 'cancel') {
                        layer.close(layerIndex);
                    }
                });


                $('.cancel-layer').on('click', function () {
                    layer.close(layerIndex);
                })

                form.on('submit(formTest)', function (data) {
                    var dataJson = data.field;
                    var num = $('#confirm').data('num');
                    if(num === 0){
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/holidays/insert.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.close(layerIndex);
                                    active.reload();
                                }
                            }
                        })
                    }else if(num === 1){
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/holidays/update.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.close(layerIndex);
                                    active.reload();
                                }
                            }
                        })
                    }
                    return false;
                })

                var runEvent = function () {
                    //初始化表单值
                    var title = '';
                    if (arguments.length > 0) {
                        var data = arguments[0];
                        form.val('example', {
                            'id':data.id,
                            'holidayName': data.holidayName,
                            'holidayTime': data.holidayTime,
                            'holiDays': data.holiDays
                        })
                        title = '修改节日';
                        $('#confirm').data('num',1);
                    } else {
                        form.val('example', {
                            'holidayName': '',
                            'holidayTime': '',
                            'holiDays': ''
                        })
                        title = '新增节日';
                        $('#confirm').data('num',0);
                    }
                    layerIndex = layer.open({
                        type: 1
                        , title: title //不显示标题栏
                        , area: '350px;'
                        , shade: 0.8
                        , id: 'LAY_layuipro3' //设定一个id，防止重复弹出
                        // ,btn: ['确定', '取消']
                        // ,btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#addMask')
                        , success: function (layero, index) {
                            console.log(layero);

                            //日期时间选择器
                            laydate.render({
                                elem: '#holidayTime'
                                , type: 'date'
                                ,trigger: 'click'
                            });
                            form.render();
                        }
                    });
                }
            });
        }
    </script>
</body>
</html>